<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登录</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<style>
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
				height: 0.9rem;
				font-size: 14px;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			#reg {
				padding: 10px;
				border-radius: 20px;
				width: 100%;
				margin: 0 auto;
				height: 0.9rem;
			}
			
			#reg span {
				font-size: 18px;
			}
			
			.mui-input-group {
				background: none;
			}
			
			.mui-input-group:before,
			.mui-input-group:after {
				height: 0;
			}
			
			.mui-input-group input {
				background-color: #FFFFFF !important;
				width: 95% !important;
				border-radius: 25px !important;
				margin: 10px 0px 10px 0 !important;
				padding-left: 55px !important;
				float: inherit !important;
			}
			
			.mui-input-group .mui-input-row:after {
				height: 0;
			}
			
			.mui-input-group .mui-input-row {
				text-align: center;
			}
			
			.mui-input-group .mui-input-row {
				height: inherit;
			}
			
			p {
				font-size: 14px;
				margin-top: 20px;
				margin-bottom: 10px;
				color: #8f8f94;
			}
			
			p a {
				color: #000000;
				padding: 0 20px;
			}
			
			.mui-content {
				background: none;
			}
			
			#showUserPicker {
				float: inherit;
				width: 87%;
				padding: 10px 15px;
			}
			
			#yanzhengBtn {
				position: absolute;
				top: 20px;
				right: 35px;
				background: #ffcc99;
				border: 0;
				border-radius: 20px;
			}
			
			.mui-input-group .labelL {
				position: absolute;
				top: 6px;
				left: -5px;
				z-index: 99;
			}
			
			.mui-input-group .labelL img {
				width: 0.4rem;
				vertical-align: -webkit-baseline-middle;
			}
			
			.mui-input-group .labelR {
				position: absolute;
				top: 10px;
				right: 0px;
				z-index: 99;
			}
			
			.mui-input-group .labelR img {
				width: 0.2rem;
				vertical-align: -webkit-baseline-middle;
			}
			
			.mui-content-padded .mui-btn {
				background-color: #718fbd !important;
			}
			
			.mui-input-row p {
				color: #000 !important;
			}
			
			.mui-input-row span {
				color: #FCA94E;
			}
			
			.mui-content-padded {
				margin-top: 66px !important;
			}
			
			.tips {
				position: fixed;
				top: 0;
				width: 100%;
				height: 40px;
				text-align: center;
			}
			
			.tips p {
				min-width: 300px;
				max-width: 400px;
				line-height: 40px;
				margin: 0 auto;
				color: #FFF;
				display: none;
				background-color: #C91623;
			}
			
			.mui-btn-primary {
				border: 1px solid #718fbd;
				background: #718fbd;
			}
			
			#login {
				color: #7b7b7b;
				padding: 0 0 0 20%;
			}
			
			#forget {
				color: #7b7b7b;
				padding: 0 0 0 30%;
			}
			
			.mui-input-clear {
				top: 65px;
				background-color: ;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
			<h1 class="mui-title">登 录</h1>
		</header>
		<div class="mui-content" id="content">
			<form class="mui-input-group">

				<div class="mui-input-row">
					<label class="labelL"><img src="../images/yhm.png" /></label>
					<input id='account' name='account' type="number" class="mui-input" placeholder="请输入电话号" value=""></input>
				</div>
				<div class="mui-input-row">
					<label class="labelL"><img src="../images/mm.png" /></label>
					<input id='password' name='password' type="password" class="mui-input password" placeholder="请输入密码" value=""></input>
				</div>

				<!--<div class="mui-input-row">
					<p>首次登录密码默认为000000 ，<span>请修改您的密码</span></p>
				</div>
				<div class="mui-input-row">
					<label class="mui-pull-right labelL"><img src="../images/mm.png" /></label>
					<input id='setpassword password' name='setpassword' type="password" class="mui-input password" placeholder="请输入新密码"></input>
				</div>
				<div class="mui-input-row">
					<label class="mui-pull-right labelL"><img src="../images/mm.png" /></label>
					<input id='doublepassword password' name='doublepassword' type="password" class="mui-input repassword" placeholder="请输入您的密码"></input>
				</div>-->
			</form>
			<div class="mui-content-padded">
				<button id='reg' class="mui-btn mui-btn-block mui-btn-primary "><span>登 录</span></button>
				<p>
					<a href="javascript:;" id="login">用户注册</a>
					<a href="javascript:;" id="forget">忘记密码?</a>
				</p>
			</div>
		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/xiangyingshi.js"></script>
		<script type="text/javascript" src="../js/app.js"></script>
		<script type="text/javascript" src="../js/constants.js"></script>
		<script type="text/javascript" src="../js/sharemethods.js"></script>
		<script type="text/javascript" src="../js/mui.picker.js"></script>
		<script type="text/javascript" src="../js/mui.poppicker.js"></script>
		<script type="text/javascript" src="../js/json_time.js"></script>
		<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>

		<script>
			mui.back = function(event) {
				backButtonPress++;
				if(backButtonPress > 1) {
					plus.runtime.quit();
				} else {
					plus.storage.removeItem("roster");
					plus.nativeUI.toast('再按一次退出应用');
				}
				setTimeout(function() {
					backButtonPress = 0;
				}, 1000);
				return false;
			};
			mui.plusReady(function() {
				var topoffset = '45px';
				if(plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
					// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
					topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
					document.querySelector("header").style.height = topoffset;
					document.querySelector("header").style.paddingTop = "20px";
					document.getElementById('content').style.paddingTop = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + "px";
				}
				
				if(localStorage.getItem("PHONE")){
					$("#account").val(localStorage.getItem("PHONE"))
				}
				
				$("#reg").on("click", function() {
					var phone = $("#account").val();
					if(!phone || phone == "") {
						mui.toast("请输入用户名");
						return false;
					}
					var password = $("#password").val();
					if(!password || password == "") {
						mui.toast("请输入密码");
						return false;
					}
					var clientid = plus.push.getClientInfo().clientid;
					var uuid = plus.device.uuid;
					var os = plus.os.name;
					var obj = {
						phone: phone,
						password: password,
						clientid: clientid,
						uuid: uuid,
						os: os
					}
					var sussess = function(data) {
						if(data.result == "success") {
							localStorage.setItem('ACCESSTOKEN', data.obj.access_token);
							localStorage.setItem('USERID', data.obj.id);
							localStorage.setItem('USER', JSON.stringify(data.obj.user));
							localStorage.setItem('PHONE', phone);
							var index = plus.webview.getLaunchWebview();
							index.reload(true);
							plus.webview.currentWebview().close("none");
						} else {
							mui.toast(data.msg);
						}
					};
					commonHttpUtils(loginUrl, "post", obj, sussess, error);
				});

				// 注册页面
				$("#login").click(function(event) {
					mui.openWindow({
						url: 'register.html',
						id: 'register',
						show: {
							autoShow: false, //页面loaded事件发生后自动显示，默认为true
							event: 'loaded' //页面显示时机，默认为titleUpdate事件时显示
						},
						waiting: {
							autoShow: true //自动显示等待框，默认为true
						}
					});
				});

			});

			$("#forget").click(function(e) {
				mui.openWindow({
					url: 'forget_password.html',
					id: 'forget_password',
					show: {
						autoShow: false, //页面loaded事件发生后自动显示，默认为true
						event: 'loaded' //页面显示时机，默认为titleUpdate事件时显示
					},
					waiting: {
						autoShow: true //自动显示等待框，默认为true
					}
				});
			});
		</script>
	</body>

</html>